<template>
    <div>
        <transferModule name='待选任务列表' :keyName='keyName' :valueName='valueName' :propData='leftListData' :selectData='leftChecked' :hideArr='hideData' @itemclick='leftBackData'></transferModule>
        <div class="btn-box">
            <div class="flx-column">
                <el-button type="primary" :disabled="leftChecked.length === 0" @click="addToLeft ">
                    <i class="el-icon-arrow-right"></i>
                </el-button>
                <el-button type="primary" :disabled="rightChecked.length === 0" @click="addToRight">
                    <i class="el-icon-arrow-left"></i>
                </el-button>
            </div>
        </div>
        <transferModule name='已选设备' :propData='rightListData' :keyName='keyName' :valueName='valueName' :selectData='rightChecked' :leftFootBtn='false' :rightFootBtn='true' @itemclick='rightBackData' @clearRight='clearRight'></transferModule>
    </div>
</template>

<script lang="ts">
import transferModule from './module.vue';
import { toRaw } from '@vue/reactivity';

import { defineComponent, ref, toRefs, reactive, computed } from 'vue';
export default defineComponent({
    name: 'transfer',
    components: { transferModule },
    props: {
        // 默认选中值
        modelValue: {
            type: Array,
            default: function() {
                return [];
            }
        },
        // 默认列表数据
        propData: {
            type: Array,
            default: function() {
                return [];
            }
        },
        // 右侧默认列表数据
        rightCheckedData: {
            type: Array,
            default: function() {
                return [];
            }
        },

        // 列表key取值
        keyName: {
            type: String,
            default: 'label'
        },
        // 列表显示名字取值
        valueName: {
            type: String,
            default: 'id'
        }
    },
    setup(props, { emit }) {
        const remeberData = [...props.modelValue];
        const data: any = reactive({
            leftChecked: [], //选中值
            rightChecked: [...props.rightCheckedData, ...[]], //选中值
            leftListData: [...props.propData, ...[]], // 列表值
            rightListData: [...props.modelValue, ...[]], // 列表值
            hideData: { diss: true },
            leftBackData: (back: any[]) => {
                data.leftChecked = back;
            },
            rightBackData: (back: any[]) => {
                data.rightChecked = back;
            },
            clearRight: () => {
                data.leftListData = [...[], ...props.propData, ...remeberData];
                data.rightListData = [];
                emit('update:modelValue', data.rightListData);
            },
            addToLeft: () => {
                let rightArr: any[] = [];
                let leftArr: any[] = [];
                data.leftListData.forEach((item: any, index: number) => {
                    if (data.leftChecked.includes(item[props.valueName])) {
                        rightArr.push(item);
                    } else {
                        leftArr.push(item);
                    }
                });
                data.leftListData = leftArr;
                data.rightListData = [...data.rightListData, ...rightArr];
                data.leftChecked = [];
                emit('update:modelValue', data.rightListData);
            },
            addToRight: () => {
                let rightArr: any[] = [];
                let leftArr: any[] = [];
                // let rightId: any[] = [];
                data.rightListData.forEach((item: any, index: number) => {
                    if (data.rightChecked.includes(item[props.valueName])) {
                        leftArr.push(item);
                    } else {
                        // rightId.push(item[props.valueName]);
                        rightArr.push(item);
                    }
                });
                data.leftListData = [...data.leftListData, ...leftArr];
                data.rightListData = rightArr;
                data.rightChecked = [];
                emit('update:modelValue', data.rightListData);
            }
        });
        return { ...toRefs(data) };
    }
});
</script>

<style lang="scss" scoped>
.btn-box {
    display: inline-block;
    padding: 0 20px;
    button + button {
        margin: 20px 0 0 0;
    }
    .flx-column {
        display: flex;
        flex-direction: column;
    }
}
</style>